<template>
  <view class="bdrs-8 ov-h">
    <view
      @click="$emit('item', it)"
      class="bg-cell pa-3 pos-r"
      :hover-class="clickable ? 'btn-1' : null"
      :class1="{
        'u-border-bottom': j < items.length - 1,
      }"
      v-for="(it, j) in items"
      :key="j"
    >
      <view class="al-c">
        <view class="mr-2" v-if="it.icon">
          <u-avatar
            v-if="/\./.test(it.icon)"
            :src="it.icon"
            size="30"
          ></u-avatar>
          <u-icon v-else :name="it.icon" size="22"></u-icon>
        </view>
        <view
          class="shrink-0"
          :style="{
            fontSize,
          }"
          >{{ it.title }}</view
        >
        <view class="ml-auto mr-2"></view>
        <view v-if="it.value" class="op-5 fz-14">
          <u-parse :content="it.value"></u-parse>
        </view>
        <view class="op-7" v-if="arrow">
          <u-icon name="arrow-right"></u-icon>
        </view>
        <view v-if="checked && checked.includes(it.id)">
          <u-icon name="checkbox-mark" color="#16c560" size="20px"></u-icon>
        </view>
      </view>

      <button
        class="pos-mask op-0"
        v-if="it.openType"
        :open-type="it.openType"
      ></button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: Array,
    arrow: Boolean,
    textIcon: Boolean,
    checked: Array,
    fontSize: {
      type: String,
      default: "16px",
    },
    clickable: {
      type: Boolean,
      default: true,
    },
  },
};
</script>
